<template>
    <div class="wrapper">

        <!-- header部分 -->
        <header>
            <p>商家列表</p>
        </header>

        <!-- 商家列表部分 -->
        <ul class="business">
            <li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
                <div class="business-img">
                    <img :src="item.businessImg">
                    <div class="business-img-quantity" v-show="item.quantity>0">{{ item.quantity }}</div>
                </div>
                <div class="business-info">
                    <h3>{{item.businessName}}</h3>
                    <p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliverPrice}}配送</p>
                    <p>{{item.businessExplain}}</p>
                </div>
            </li>
        </ul>

        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';

    export default{
        name: 'BusinessList',
        data(){
            return {
                orderTypedId: null, // 获取订单类型ID
                businessArr:[],
                user:{}
            }   
        },
        created() {
            this.user = this.$getSessionStorage('user'); // 获取用户信息
            /// 根据orderTypedId获取商家列表
            //console.log('获取到的订单类型ID:', this.orderTypedId);
            this.orderTypedId = this.$route.query.orderTypeId;
            //console.log('获取到的订单类型ID:', this.orderTypedId);
            this.$axios.get('businesses',{
                 params: {
                    orderTypeId: this.orderTypedId
                }
            }) 
            .then(response=>{
                //console.log('接口返回：', response.data);
                this.businessArr = response.data; // 将获取到的商家列表存储到businessArr中

                if(this.user!=null){
                    listCart();
                }
            }

            ).catch(error=>{
                console.error('接口错误：', error);
            }

            );

        },
        components: {
            Footer
        },
        methods:{
            listCart(){
                this.$axios.get('carts',{
                    params:{
                        userId: this.user.userId
                    }
                }).then(response=>{
                    let cartArr = response.data;
                    //遍历所有食品列表
                    for(let businessitem of this.businessArr){
                        businessitem.quantity = 0; // 初始化每个食品的数量为0
                        //遍历购物车列表
                        for(let cartitem of cartArr){
                            if(businessitem.businessId == cartitem.businessId){
                                businessitem.quantity += cartitem.quantity; // 更新食品数量
                               
                            }
                        }
                    }
                    //this.foodArr.sort(); 
                }).catch(error=>{
                    console.error('接口错误：', error);
                });
            },
            toBusinessInfo(businessId) {
                // 跳转到商家详情页面
                this.$router.push({path: '/businessInfo', query: {businessId: businessId}});
            }
        }
    }
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

/****************** 商家列表部分 ******************/
.wrapper .business {
    width: 100%;
    margin-top: 12vw;
    margin-bottom: 14vw;
}

.wrapper .business li {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    border-bottom: solid 1px #DDD;
    user-select: none;
    cursor: pointer;

    display: flex;
    align-items: center;
}

.wrapper .business li .business-img {
    /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
    position: relative;
}

.wrapper .business li .business-img img {
    width: 20vw;
    height: 20vw;
}

.wrapper .business li .business-img .business-img-quantity {
    width: 5vw;
    height: 5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;
    border-radius: 2.5vw;

    display: flex;
    justify-content: center;
    align-items: center;

    /*设置成绝对定位，不占文档流空间*/
    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}

.wrapper .business li .business-info {
    margin-left: 3vw;
}

.wrapper .business li .business-info h3 {
    font-size: 3.8vw;
    color: #555;
}

.wrapper .business li .business-info p {
    font-size: 3vw;
    color: #888;
    margin-top: 2vw;
}

</style>